<template>
  <div class="box">
    <!-- 头部区域 -->
    <div class="boxtop">
      <van-nav-bar title="签约">
        <template #left>
          <van-icon
            name="arrow-left"
            color="#fff"
            size="18"
            @click="clickLeft"
          ></van-icon>
        </template>
      </van-nav-bar>
    </div>
    <!-- 入库材料上传 -->
    <div class="backgroundColor">入库材料上传</div>
    <div class="centerpicture">
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <div class="pictureaa">
            <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
          </div>
          <div class="cardu">旧车行驶证</div>
        </van-grid-item>
        <van-grid-item>
          <div class="pictureaa">
            <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
          </div>
          <div class="cardu">VIN码</div>
        </van-grid-item>
      </van-grid>
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <div class="pictureaa">
            <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
          </div>
          <div class="cardu">旧车主身份证明</div>
        </van-grid-item>
        <van-grid-item>
          <div class="pictureaa">
            <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
          </div>
          <div class="cardu">旧车照片</div>
        </van-grid-item>
      </van-grid>
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <div class="pictureaa">
            <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
          </div>
          <div class="cardu">非同车主关系证明</div>
        </van-grid-item>
        <van-grid-item>
          <div class="pictureaa">
            <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
          </div>
          <div class="cardu">二手车销售统一发票查验</div>
        </van-grid-item>
      </van-grid>
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <div class="pictureaa">
            <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
          </div>
          <div class="cardu">登录证第1-2页</div>
        </van-grid-item>
        <van-grid-item>
          <div class="pictureaa">
            <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
          </div>
          <div class="cardu">登记证第3-4页</div>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 按钮 -->
    <div class="bottomButton">
      <div class="button">
        <span class="text">成交入库</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    clickLeft () {
      this.$router.back()
    }
  }
}
</script>
<style lang="less" scoped>
// 按钮
.bottomButton {
  margin-top: 57px;
  margin-bottom: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 325px;
    height: 38px;
    background-color: #4397d4;
    border-radius: 30px;
    .text {
      font-size: 16px;
      color: #ffff;
    }
  }
}
.centerpicture {
  .pictureaa {
    width: 120px;
    height: 120px;
    border: 1px solid #999999;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    .van-image {
      width: 90%;
      height: 90%;
    }
  }
  .cardu {
    font-size: 0.373333rem;
    margin-top: 10px;
    color: #999999;
  }
}
.backgroundColor {
  height: 60px;
  background-color: #f6f6f9;
  font-size: 14px;
  line-height: 60px;
  padding-left: 10px;
  color: #999999;
}
</style>
